<template>
<div>
  <div class="main">
    <div class="formData">
      <el-card style="padding: 10px 10px 5px 10px">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="监控类型">
          <el-input v-model="formInline.user" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="监控对象">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指标名称">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知类型">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知时间">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="中心">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小组">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="责任人">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理人">
          <el-date-picker v-model="value1" type="daterange"
                          start-placeholder="开始日期"
                          range-separator="至"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions1">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onSubmit">重置</el-button>
        </el-form-item>
      </el-form>
      </el-card>
      <div class="table">
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            width="50"
            label="序号"
            type="index">
          </el-table-column>
          <el-table-column
            prop="date"
            label="总分"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="状态"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            label="总分"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            label="总分"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="描述">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <el-link type="primary" plain @click="handEdit">编辑</el-link>
            <el-link type="primary" plain @click="handEdit">删除</el-link>
            <el-link type="primary" plain @click="handEdit">维度配置</el-link>

          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "dataDetails.vue",
  data() {
    return {
      value1: '', // 日
      pickerMinDate: null,
      pickerMaxDate: null,
      day31: 31 * 24 * 3600 * 1000,
      // 日期使用
      pickerOptions1: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            return (
              time.getTime() > (this.pickerMinDate + this.day31)) ||
              (time.getTime() < (this.pickerMinDate - this.day31)
            );
          }
          return false;
        }
      },
      formInline: {
        user: '',
        region: '',

      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    onSubmit() {},
  }
}
</script>

<style lang="scss" scoped>
  .main {
    margin: 10px;
  }
  .formData {
    width: 100%;
    .el-form-item {
      width: 19%;
      margin-right: 0px;
      ::v-deep .el-form-item__label {
        padding-right: 5px;
        width: 30%;
      }
      ::v-deep .el-form-item__content {
        width: 70%;
      }
    }
  }
</style>
